<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/pages/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Generator" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="expires" Content="-1" />
<title>鹰牌陶瓷合肥运营中心</title>
<meta name="keywords" content="鹰牌陶瓷,陶瓷,鹰牌,安徽,合肥" />
<meta name="description" content="鹰牌陶瓷合肥运营中心,在线订购" />
<meta name="author" content="" />
<link href="${ctx}/css/sub/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${ctx}/themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/css/main.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/css/colorbox/skin4/colorbox.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/commons/scripts/jquery-ui/themes/blitzer/jquery-ui-1.8.16.custom.css" type="text/css" />
<!-- IE6 fixes are found in styles/ie6.css -->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="${ctx}/css/ie6.main.css" /><![endif]-->
<style type="text/css">
<!--
.dingdan_xx {
    background: url("${ctx}/css/images/dingdanxinxi_03.png") repeat-y scroll 0 0 transparent;
}

.yes_loginslt {
    float: left;
    height: 100%;
    width: 800px;
}

.dingdan_left {
    float: left;
    width: 765px;
}

.login_yesleft {
    float: left;
    margin-left: 18px !important;
    width: 333px;
}

.xaiont_yes h1, .xaiont_yes h2 {
    float: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
    font-weight: normal;
}

h1, h2, h3, h4, h5, p {
    display: block;
    margin: 0;
    padding: 0;
}

.confi_abg {
    background: url("${ctx}/css/images/login_imginp_15.gif") repeat-x scroll 0 0 transparent;
    height: 34px;
    width: 650px;
}

#add_pro_td {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}
	
#add_pro_td span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;top: 50%;
	margin-top: -8px;
}

tr.alt td {
	background: #ecf6fc;
}

tr.over td {
	background: #FFC1B6;
}

#p_img{
	position:absolute;
	display:none;
	background:#fff
}

#p_img div{
	top:0;
	left:0;
}; 
-->
</style>
</head>
<body>
<div id="main">
<jsp:include page="../../header.jsp" />
<div id="bd">
  <div id="bd_left2" style="width: 211px; ">
 		<%@ include file="../../adv.jsp" %>
   </div>
  <div id="bd_right2" class="news" style="width: 733px;z-index: 10000000">
    <div class="box1 mod">
      <div class="mt">
        <h2>在线订购</h2>
        <div class="extra"><span style="padding-right:10px ">详细</span></div>
      </div>
      <br />
      <div id="p_img">
        <div></div>
      </div>
      <div class="xaiont_yes">
        <h1><img src="${ctx}/css/images/login_imginp_10.gif" width="738" height="23" /></h1>
        <div class="yes_loginslt dingdan_xx">
          <div class="ui-widget-header ui-corner-all" style="width: 710px;line-height: 25px;margin-left: 14px;margin-top: -10px;">
            <div class="ui-datepicker-title" style="text-align: center;font-size: 18px;">您的订单</div>
          </div>
          <div class="pd" style="margin-top: -20px;">　　
            <html-el:form action="/OnlineOrder.do">
              <html-el:hidden property="mod_id" />
              <html-el:hidden property="total_price" value="0" />
              <table width="90%" border="0" cellpadding="0" cellspacing="0" class="datagrid" style="margin-left: 5px;">
                <tr id="hidden_pro_tr" style="display: none;background-color: #FFFFE5;">
                  <html-el:hidden property="product_id" styleId="product_id" />
                  <html-el:hidden property="num" styleId="num" />
                  <td width="5%" nowrap="nowrap" align="right"><strong>&nbsp;已选产品：</strong></td>
                  <td width="25%" class="select_p"><span id="pd_md" style="cursor: pointer;overflow: hidden;"></span></td>
                  <td width="60%" nowrap="nowrap" class="select_p"><span class="price"><b>促销价：</b><font color="#FF5500"><b><em id="prom_price"></em></b></font>/片</span>&nbsp;&nbsp;<span><b>订购数量：</b><span id="p_num"></span>片</span>&nbsp;&nbsp;<span class="price"><b>金额：</b><font color="#FF2900"><b><em id="cur_total"></em></b></font></span></td>
                  <td width="10%" align="left" nowrap="nowrap" style="padding-right: 10px;"><span id="delete"><img src="${ctx}/css/images/x.gif" style="vertical-align:middle;" />取消</span></td>
                </tr>
                <tbody id="pro_tbody">
                  <tr>
                    <c:choose>
                      <c:when test="${hf.map.mod_id eq 2902}">
                        <!-- 促销活动  -->
                        <td width="20%" nowrap="nowrap" align="left"><span style="color: #F00;">*</span><strong>促销活动：</strong></td>
                        <td width="80%" nowrap="nowrap" colspan="3"><html-el:select property="news_id" styleId="news_id" style="width:180px" value="${hf.map.news_id}">
                            <html-el:option value="">请选择...</html-el:option>
                            <c:forEach var="po_cur" items="${promotionList}">
                              <html-el:option value="${po_cur.id}">${po_cur.title}</html-el:option>
                            </c:forEach>
                          </html-el:select></td>
                      </c:when>
                      <c:otherwise>
                        <!-- 在线订购(促销产品)  -->
                        <td align="left" nowrap="nowrap" colspan="3">&nbsp;<a href="#" id="add_pro_td" class="ui-state-default ui-corner-all" title="请选择您要订购的产品"><span class="ui-icon ui-icon-newwin"></span>选择产品</a></td>
                      </c:otherwise>
                    </c:choose>
                  </tr>
                </tbody>
                <tr>
                  <td colspan="4">&nbsp;</td>
                </tr>
                <tr>
                  <td colspan="4">&nbsp;</td>
                </tr>
                <tr>
                  <td colspan="4" class="price" style="padding-left: 455px;"><b>总金额：</b><font color="#FF2900"><b><em id="total_price">0</em></b></font></td>
                </tr>
              </table>
              <table>
                <tr>
                  <td colspan="3"><div class="pd_title2" align="center" style="margin-bottom: 10px;margin-top: 20px;"></div></td>
                </tr>
                <tr>
                  <td colspan="3"><div><span><img src="${ctx}/css/images/write.png" height="30"/></span>&nbsp;<span style="vertical-align: top;"><strong>您的信息</strong></span></div></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><span style="color: #F00;">*</span><strong>您的姓名：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:text property="name" styleId="name" style="width:150px" /></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><span style="color: #F00;">*</span><strong>您的性别：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:radio property="sex" styleId="sex" value="0" />
                    先生&nbsp;&nbsp;
                    <html-el:radio property="sex" styleId="sex" value="1" />
                    女士</td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><span style="color: #F00;">*</span><strong>手机号码：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:text property="mobile" styleClass="ui-autocomplete-input" styleId="mobile" style="width:150px" /></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><strong>&nbsp;&nbsp;联系QQ&nbsp;：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:text property="QQ" styleId="QQ" style="width:150px" /></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><span style="color: #F00;">*</span><strong>送货地址：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:text property="address" styleId="address" style="width:400px" /></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><strong>&nbsp;您的留言：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:textarea property="memo" styleId="memo" style="width:400px" />
                    <span  style="color:red;">(500字以内)</span></td>
                </tr>
                <tr>
                  <td nowrap="nowrap" align="right" width="20%"><span style="color: #F00;">*</span><strong>&nbsp;&nbsp;验证码&nbsp;&nbsp;：</strong></td>
                  <td nowrap="nowrap" colspan="2" width="80%"><html-el:text property="verificationCode" styleId="verificationCode" size="4" maxlength="4" style="width:36px;" />
                    &nbsp;&nbsp;<img src="${ctx}/images/VerificationCode.jpg" style="height:18px;vertical-align:middle;border:1px solid #A1BCA3;cursor:pointer;" alt="验证码，看不清楚请用鼠标点击此处！" onClick="$(this).hide().attr('src', this.src + '?' + new Date().getTime()).fadeIn();" /></td>
                </tr>
                <tr>
                  <td colspan="3"><div class="pd_title2" align="center"></div></td>
                </tr>
                <tr>
                  <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                  <td width="20%">&nbsp;</td>
                  <td colspan="2" width="80%" style="padding-left: 120px;"><img src="${ctx}/css/images/xianzzhufu_03.png" id="save" style="cursor:pointer;" title="确认提交" />&nbsp;<img src="${ctx}/css/images/xianzzhufu_04.png" id="close" onClick="window.close();" style="cursor:pointer;" title="关闭页面" />&nbsp;&nbsp;<span id="loading" style="display:none;"><img src="${ctx}/commons/styles/images/loading.gif" style="vertical-align:middle; margin: 2px;" />数据提交中，请稍候...</span></td>
                </tr>
              </table>
              <p>&nbsp;</p>
              <div>
                <div><span style="color: #F00;"><img src="${ctx}/css/images/wenxitishi.png" height="30"/></span>&nbsp;<span style="vertical-align: top;"><strong>温馨提示</strong></span></div>
                <table width="90%" border="0" cellpadding="1" cellspacing="1" style="padding-left: 20px;">
                  <tr style="line-height: 20px;">
                    <td width="3%" valign="top">1)</td>
                    <td>您可以点击页面上方的[选择产品]按钮进行产品的订购，然后填写您的信息资料，我们会在第一时间跟您取得联系确认订单。</td>
                  </tr>
                  <tr style="line-height: 20px;">
                    <td width="3%" valign="top">2)</td>
                    <td>我们郑重承诺，您所填写的联系方式和地址信息我们将严格保密，不会以任何形式透露给任意第三方。</td>
                  </tr>
                </table>
              </div>
            </html-el:form>
          </div>
        </div>
      </div>
      <h1><img src="${ctx}/css/images/dingdanxinxi_10.gif" width="738" height="20" /></h1>
    </div>
  </div>
</div>
</div>
<jsp:include page="../../footer.jsp" />
<script type="text/javascript" src="${ctx}/commons/scripts/validator.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
	initStyle();
	
	$("#news_id").attr("datatype","Require").attr("msg","促销活动必须选择");
	$("#name").attr("datatype","Require").attr("msg","您的姓名必须填写");
	$("input[type='radio'][name='sex']").eq(0).attr("dataType","Group").attr("msg","您的性别必须选择");
	$("#mobile").attr("datatype","Mobile").attr("msg","手机号码格式不正确");
	$("#address").attr("datatype","Require").attr("msg","送货地址必须填写");
	$("#verificationCode").attr("datatype","Require").attr("msg","验证码必须填写");
	
	var f = document.forms[0];
	$("#save").click(function(){
		
		if(Validator.Validate(f, 1)) {
			if($.trim($("#name").val()).length > 10){
				alert("您的姓名不能超过10个字。");
				return false;
			}
			if($.trim($("#QQ").val()).length > 0){
				if(!f.QQ.value.match(/^[0-9]\d*?\d*?$/)){
					alert("联系QQ必须是数字。");
					return false;
				}
				if($.trim($("#QQ").val()).length > 20){
					alert("联系QQ不能超过20个字。");
					return false;
				}
			}
			if($.trim($("#address").val()).length > 200){
				alert("送货地址不能超过200个字。");
				return false;
			}
			if($.trim($("#memo").val()).length > 500){
				alert("您的留言不能超过500个字。");
				return false;
			}

			if(!confirm("您确认提交订单吗？")){
				return false;
			}
			
			//escape(jQuery("#evaluate_cont").val())
			var para = "&name=" + escape($("#name").val()) + "&sex=" + $("#sex").val() + "&mobile=" + $("#mobile").val()
			 		 + "&QQ=" + $("#QQ").val() + "&address="  ;
			$("#loading").ajaxStart(function() {
				$("#save").attr("disabled","true");
				$("#loading").show();
			});
			$("#loading").ajaxStop(function() {
				$("#loading").hide();
			});
			$.ajax({
			   async: false,
			   type: "POST",
			   url: "OnlineOrder.do",
			   data: "method=save&" + $("form:first").serialize(),
			   dataType: "json",
			   error: function(request, settings) {/*alert("数据请求失败！"); */},
			   success: function(data) {
				  if(data == 1){
					  location.replace('${ctx}/hf/OnlineOrder/success.jsp');
				  }else if(data == 2){
					  alert("验证码不正确，请重新输入验证码");
					  $("#save").removeAttr("disabled");
					  return;
				  }else{
					  location.replace('${ctx}/hf/OnlineOrder/fail.jsp');
				  }
			   }
		   });
		}
	});
 });

 function initStyle(){
	$("select,input[type='text']").css({border: "1px solid #ccc"}).css("height","18px").css("line-height","18px");
    
	$("textarea").each(function(){
		this.onpropertychange = function () {
			if (this.scrollHeight > 16) this.style.posHeight = this.scrollHeight;
		};
	}).css("height","40px");
 }

 function setOnlyInteger() {
	return false;
	$(this).css("ime-mode", "disabled").attr("t_value", "").attr("o_value", "").bind("dragenter",function(){
		return false;
	});
	$(this).keypress(function (){
		if(!this.value.match(/^[1-9]\d*?\d*?$/))this.value=this.t_value;
		else this.t_value=this.value;
		if(this.value.match(/^(?:[1-9]\d+(?:\d+)?)?$/))
			this.o_value=this.value;
	}).keyup(function (){
		if(!this.value.match(/^[1-9]\d*?\d*?$/))this.value=this.t_value;
		else this.t_value=this.value;
		if(this.value.match(/^(?:[1-9]\d+(?:\d+)?)?$/))
			this.o_value=this.value;
	}).blur(function (){
		if(!this.value.match(/^(?:[1-9]\d+(?:\d+)?|\d*?)?$/)){
			this.value=this.o_value;
		}else{
			if(this.value.match(/^\d+$/))this.value=this.value;
			if(this.value.match(/^$/))this.value=this.value;
			this.o_value=this.value;
		}
	});
}

 /*选择产品*/
 $("#add_pro_td").click(function (){
	$(this).colorbox({iframe:true, width:850, height:710,href:'ProductDisplay.do?method=orderSelect&mod_id=3200&is_recommend=1'});
	 
 }).css("cursor", "pointer");// END_CLICK

 /*回显选择的产品*/
 function order_get(product_id,product_name,product_model,promotion_price,sale_price,save_url,amount){
	//alert("选择信息："+product_id+"-"+product_name+"-"+product_model+"_"+promotion_price+"_"+sale_price+"-"+save_url+"-"+amount);
	//重复订购同一款产品，需要叠加
	var flag = true;
	$("tr:not(:first)","#pro_tbody").each(function(){
		if($(this).find("#product_id").val() == product_id){
			var pre_num = $(this).find("#num").val();
			$(this).find("#num").val(Number(pre_num) + Number(amount));
			$(this).find("#p_num").text(Number(pre_num) + Number(amount));
			$(this).find("#cur_total").text(((Number(pre_num)+ Number(amount)) * promotion_price).toFixed(2));
			flag = false;
			return;
		}
	});

	if(flag){
		$("#hidden_pro_tr").clone().appendTo($("#pro_tbody")).show();
		var lastTR = $("tr:last", "#pro_tbody");
		lastTR.find("#product_id").val(product_id);
		lastTR.find("#pd_md").text(product_name + product_model);
		lastTR.find("#num").val(amount);
		lastTR.find("#prom_price").text(promotion_price);
		lastTR.find("#p_num").text(amount);
		lastTR.find("#cur_total").text((promotion_price * amount).toFixed(2));

		$(lastTR).mouseover(function(){  
			$(this).addClass("over");
		}).mouseout(function(){
			$(this).removeClass("over");
		});

		/*产品图片跟随鼠标移动*/
		var p_img = document.getElementById("p_img");
		$("#pd_md",lastTR).mouseover(function(){  
			var img_div = "<div class='bd'><img width='171' height='171' style='border:#C1C1C1 solid 1px' src='${ctx}/" + save_url + "' /><s><i></i></s></div>";
			p_img.innerHTML = img_div;
			p_img.style.display  = "block";
		}).mousemove(function(event){
			var event = event || window.event;	
			p_img.style.top = lastTR.attr("offsetTop")+lastTR.attr("offsetHeight") +220+ "px";
			p_img.style.left = event.clientX  - 200 + "px";
		}).mouseout(function(){
			p_img.style.display = "none";
		});

		/*删除按钮事件*/
		$("td:last", lastTR).click(function (){
			var d_price = Number($(lastTR).find("#cur_total").text()) || 0;
	    	$(this).parent().remove();
			
	    	//总价相应变化
	    	$("#total_price").text(Number($("#total_price").text()) - d_price);
	    	$("input[name='total_price']").val(Number($("#total_price").text()) - d_price);
	    }).css("cursor", "pointer");
	}

	//总价
	var pre_tp = Number($("#total_price").text()) || 0;
	$("#total_price").text((pre_tp + promotion_price * amount).toFixed(2));
	$("input[name='total_price']").val((pre_tp + promotion_price * amount).toFixed(2));
 }


 $("input[type='text'],textarea").hover(function(){
	$(this).css("border","#2CD0E6 solid 1px");
 },function(){$(this).css("border","#ccc solid 1px");});

 </script>
</body>
</html>
